<template>
	<div>
		<div class="activitiesCoupons2" v-if="dataList.length>0">
			<!--一排一个优惠券-->
			<div v-if="CouponsStyle==='one'">
				<div v-if="couponsdata.length>0" v-for="(val,index) in couponsdata" :key="index" style="position: relative;">
					<img style="width: 100%;" :src="val.publicityPicture" @click='mycoupons(val)' />
					<i v-if="val.state=='已领取'" class="icon njfont nj-yilingqu statestyle" style="top: 0.65rem;right: 2.3rem;"></i>
					<i v-if="val.state=='已抢完'" class="icon njfont nj-yiqiangwan statestyle" style="top: 0.65rem;right: 2.3rem;"></i>
				</div>
				<div style="height: 2.5rem;line-height: 2.5rem;" v-if="couponsdata.length==0 && dataList.length>0 && env === 'edit'">
					配置的所有优惠券活动已结束
				</div>
			</div>
			<!--一排两个优惠券-->
			<div class="coutwoPic" v-if="CouponsStyle==='two'">
				<div v-if="couponsdata.length>0" class="coutwoPicimg" v-for="(val,index) in couponsdata" :key="index">
					<img :src="val.publicityPicture" @click="mycoupons(val)" />
					<i v-if="val.state=='已领取'" class="icon njfont nj-yilingqu statestyle" style="top: 2rem;right: 0.65rem;"></i>
					<i v-if="val.state=='已抢完'" class="icon njfont nj-yiqiangwan statestyle" style="top: 2rem;right: 0.65rem;"></i>
				</div>
				<div style="height: 2.5rem;line-height: 2.5rem;" v-if="couponsdata.length==0 && dataList.length>0 && env === 'edit'">
					配置的所有优惠券活动已结束
				</div>
			</div>
			<!--一排三个优惠券-->
			<div class="couthreePic" v-if="CouponsStyle==='three'">
				<div v-if="couponsdata.length>0" class="couThreePicimg" v-for="(val,index) in couponsdata" :key="index">
					<img :src="val.publicityPicture" @click='mycoupons(val)' />
					<i v-if="val.state=='已领取'" class="icon njfont nj-yilingqu statestyle"></i>
					<i v-if="val.state=='已抢完'" class="icon njfont nj-yiqiangwan statestyle"></i>
				</div>
				<div style="height: 2.5rem;line-height: 2.5rem;" v-if="couponsdata.length==0 && dataList.length>0 && env === 'edit'">
					配置的所有优惠券活动已结束
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div v-if="dataList.length==0 && env === 'edit'" style="height: 2.5rem;line-height: 2.5rem;">请配置优惠券数据</div>
	</div>
</template>

<script>
	import { mapMutations } from "vuex";
	import axios from "axios";
	import Banner from '../../real-components/BannerScroll';
	import { MessageBox } from '@/ui-components';
	import { Toast } from "@/utils/toast.js";
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			config: {
				type: Object,
				default: ()=>{}
			},
			copolddataobj: {
				type: Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				couponsdata: [],
				flageclick: true,
				//判断是否为分享的页面
				isShare: 0,
				/*可以领取的优惠券*/
				copolddata: [],
				copolddata1: [], //已领完
				copolddata2: [], //明日领
			}
		},
		components: {
			Banner
		},
		methods: {
			...mapMutations('xxy', [
				"setstoptouch"
			]),
			//编辑环境领取优惠券数据
			queryCoupons3() {
				var sessionId = localStorage.getItem('sessionId');
				let url = api.trade_host + '/marketCenter/getDiffReleasedCoupons/' + api.enterpriseCode;
				let config = {
					url: url,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.copolddataobj1 = res.data.data[0]
				})
			},
			//首页领取优惠券
			queryCoupons(data) {
				var rescup
				if(data) {
					rescup = data
				} else {
					rescup = this.copolddataobj
				}
				var obj = rescup.canReceiveAgainList || [];
				var obj1 = rescup.noRemainderList || [];
				var obj2 = rescup.canReceiveTomorrowList || [];
				for(var h = 0; h < obj.length; h++) {
					this.copolddata.push(obj[h].couponCode)
				}
				for(var k = 0; k < obj1.length; k++) {
					this.copolddata1.push(obj1[k].couponCode)
				}
				for(var g = 0; g < obj2.length; g++) {
					this.copolddata2.push(obj2[g].couponCode)
				}
				this.getcodedata()
				/*if(this.copolddata.length>0 || this.copolddata1.length>0 || this.copolddata2.length>0){
					
				}*/
			},
			//处理数据
			getcodedata() {
				var sessionId = localStorage.getItem('sessionId');
				this.couponsdata = [];
				var arrcoupon = [];
				var coupons = {};
				if(this.dataList.length == 0) {
					return
				}
				if(this.dataList && this.dataList.length > 0) {
					for(var i = 0; i < this.dataList.length; i++) {
						coupons = JSON.parse(this.dataList[i].extendField).coupons
						coupons.publicityPicture = this.dataList[i].publicityPicture
						arrcoupon.push(coupons)
					}
					for(var j = 0; j < arrcoupon.length; j++) {
						arrcoupon[j].state = "立即领取"
						/*if(arrcoupon[j].auditorStatus == 5) {
							arrcoupon[j].state = "立即领取"
						} else if(arrcoupon[j].auditorStatus == 7 || arrcoupon[j].auditorStatus == 4) {
							arrcoupon[j].state = "准备开抢"
						} else {
							arrcoupon[j].state = "立即领取"
						}*/
						if(this.copolddata1.length > 0 && this.copolddata1.indexOf(arrcoupon[j].couponCode) > -1) {
							arrcoupon[j].state = "已抢完"
							this.couponsdata.push(arrcoupon[j])
						} else if(this.copolddata.length > 0 && this.copolddata.indexOf(arrcoupon[j].couponCode) < 0 && this.copolddata2.indexOf(arrcoupon[j].couponCode) < 0) {
							arrcoupon[j].state = '已抢完' //"已结束"
							this.couponsdata.push(arrcoupon[j])
						} else if(this.copolddata2.length > 0 && this.copolddata2.indexOf(arrcoupon[j].couponCode) > -1) {
							arrcoupon[j].state = "已领取"
							this.couponsdata.push(arrcoupon[j])
						} else {
							this.couponsdata.push(arrcoupon[j])
						}

					}
				}
			},
			//点击领取优惠券
			mycoupons(val) {
				var sessionId = localStorage.getItem('sessionId');
				if(!sessionId || sessionId == 'undefined') {
					if(this.isShare != 1) {
						MessageBox('用户未登录账号', '请先登录账号再领取购物券吧').then(
							() => {
								this.$router.push({
									path: 'login',
									query: {
										page: 'Coupons'
									}
								})
							}
						)
					} else {
						Toast({
							duration: 2000,
							message: '请到app登陆后领取',
							type: "fail"
						})
					}
					return
				}
				if(val.state == "已领取" || val.state == "准备开抢" || val.state == "已抢完" || val.auditorStatus == 7 || val.auditorStatus == 4) {
					return
				}
				if(this.flageclick) {
					this.flageclick = false
					let url = window.api.trade_host + '/marketCenter/receiveCouponCodesOnline/' + val.couponCode;
					let config = {
						url: url,
						method: 'GET',
						headers: {
							'sessionId': sessionId,
						},
					};
					axios(config).then((res) => {
						this.flageclick = true
						if(res.data.returnCode == 1) {
							MessageBox('', '恭喜领取成功!').then()
							val.state = "已领取"
						} else if(res.data.returnCode == 0) {
							MessageBox('', res.data.msg).then()
							val.state = "不可领"
						}
					})
				}

			},
		},
		computed: {
			CouponsStyle() {
				if(this.config.id) {
					if(parseInt(this.getCurrentVDONew(this.config.id, 1).config.couponsStyle2) == 0) {
						return 'one';
					} else if(parseInt(this.getCurrentVDONew(this.config.id, 1).config.couponsStyle2) == 1) {
						return 'two';
					} else if(parseInt(this.getCurrentVDONew(this.config.id, 1).config.couponsStyle2) == 2) {
						return 'three';
					}
				}
			},
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},
		watch: {
			dataList(data) {
				if(data && this.env === 'edit') {
					this.queryCoupons3()
					this.queryCoupons(this.copolddataobj1)
				} else {
					this.queryCoupons()
				}
			},
			copolddataobj(data) {
				this.queryCoupons(data)
				this.copolddataobj = data
			},
		},
		mounted() {
			this.isShare = this.$route.query.share;
			this.queryCoupons()
		},
	}
</script>

<style>
	.coutwoPic {
		/*padding: 0.5rem;*/
		/* position: relative;
		float: left;
		width: 100%; */
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap
	}
	
	.coutwoPic .coutwoPicimg {
		position: relative;
		float: left;
		width: 50%;
		/*margin: 0.3rem 0rem;*/
	}
	
	.coutwoPic .coutwoPicimg img {
		width: 100%;
		/*padding: 0 0.25rem;*/
	}
	
	.couthreePic {
		/*padding: 0.5rem 0.2rem;*/
		text-align: center;
		margin: 0rem auto;
		float: left;
		width: 100%;
	}
	
	.couthreePic .couThreePicimg {
		float: left;
		/*margin: 0.3rem 1%;*/
		width: 33.33%;
		position: relative
	}
	
	.couthreePic .couThreePicimg img {
		max-width: 100%;
		margin: 0 auto;
	}
	
	.activitiesCoupons2 {
		min-height: 3.8rem;
	}
	
	.activitiesCoupons2 .statestyle {
		position: absolute;
		top: 0.8rem;
		right: 0.5rem;
		font-size: 3rem;
	}
</style>